define(function(require){
	var backBone = require("backbone");
	
	var BannerModel = backBone.Model.extend({
		defaults:{
			hrefs:{},
			itemNum:0,
			bannerDate:{},
			ListWidth:"",
			items:[],
			position:0,
			id:'',
			minWidth:'',
			barItemTpl: ['<% for(var i = 0;i < num;i++){ %>',
						    '<% var activeClass = "";if(i == position){activeClass = "active"} %>',
			  			    '<span class="bar-item <%= activeClass %>" data-index="<%= i %>" ></span>',
			  			'<%  }; %>']
		},
		initialize:function(Models,options){
			//融合传入值
			this.attributes = _.extend(this.defaults,options);
			this.View = options.View;
			
			this.on("change:bannerDate",options.View.changeItemCss);
			this.on("change:ListWidth",options.View.changeListWidth);
			this.on("change:position",options.View.selectPage);
			//获得数据
	
			this.set("itemNum",this.getDateItemNum());
			this.set("bannerDate",this.getDateBannerDate());
			this.set("ListWidth",this.getListWidth());
			this.set("hrefs",this.getHref());
		},
		getDateItemNum:function(){
			var id = this.get("id");
			var num = $(id + " .banner-list").children().length
			return num
		},
		getDateBannerDate:function(){
			var id = this.get("id");
			var BannerEle = $(id)
			var Jbody = $("body");
			//限制最小值
			var minWidth =parseInt(this.get("minWidth"));
			var windowWidth = parseInt(Jbody.css("width"));
			var adptionWidth = "";
			//限制最小宽度
			if(windowWidth < minWidth){
				adptionWidth = minWidth;
			}else{
				adptionWidth = windowWidth;
			}
			var data = {
				height:BannerEle.css("height"),
				width:adptionWidth + "px",
			}
			return data
		},
		getListWidth:function(){
			var num = this.get("itemNum");
			var itemW = parseInt(this.get("bannerDate").width);
			if(num > 0){
				return itemW * num + 10 + "px"
			}else{
				return "0px"
			}
		},
		getHref:function(){
			var id = this.get("id");
			var Ele = $(id).find("a");
			var Obj = {};
			_.each(Ele,function(item,index){
				Obj[index] = item.href;
			})
			return Obj
		}
	})
	
	var BannerView = backBone.View.extend({
		el:"body",
		events:{
			"click #Banner-nextPage":"nextPage",
			"click #Banner-prevPage":"prevPage",
			"click .bar-item":"itemSelect",
			"click #bannerApp":"gotoHref",
		},
		eventsExtend:function(){
			$(window).on("resize",function(){
				this.adaption();
				this.selectPage.call(this.Model);
			}.bind(this))
		},
		initialize:function(options){
			this.Model = new BannerModel(null,{
				View:this,
				id:options.id,
				minWidth:options.minWidth,
			})
			this.eventsExtend();
			this.renderItem();
			this.autoRun();
		},
		renderItem:function(){
			var id = this.Model.get("id");
			var ItemTpl = this.Model.get("barItemTpl").join(" ");
			var itemNum = this.Model.get("itemNum");
			var position = this.Model.get("position");
			var ItemEle = _.template(ItemTpl)({
				num:itemNum,
				position:position,
			});
			$( id + " .controller-bar").html(ItemEle)
		},
		changeItemCss:function(){
			 var id = this.get("id");
			 var bannerDate = this.get("bannerDate");
			 $( id + " .banner-list").children().each(function(index,Ele){
			 	 Ele.style.height = bannerDate.height;
			 	 Ele.style.width = bannerDate.width;
			 })
		},
		changeListWidth:function(){
			var Listwidth = this.get("ListWidth");
			var id = this.get("id");
			
			$( id + " .banner-list").css({
				width:Listwidth
			})
		},
		nextPage:function(){
			var num = this.Model.get("position");
			var Max =  this.Model.get("itemNum") - 1;
			num++
			if(num <= Max){
				this.Model.set("position",num)
			}else{
				this.Model.set("position",0)
			}
			return false;
		},
		prevPage:function(){
			var num = this.Model.get("position");
			var Max =  this.Model.get("itemNum") - 1;
			num--
			if(num >= 0){
				this.Model.set("position",num);
			}else{
				this.Model.set("position",Max);
			}
			return false;
		},
		selectPage:function(){
			var id = this.get("id");
			var num =  this.get("position")
			var Max =  this.get("itemNum") - 1;
			var left = 0 - parseInt(this.get("bannerDate").width) - 5
			$(id + " .banner-list").children().first().stop().animate({
				marginLeft: (num * left) + 'px',
			},500);
			this.View.renderItem();
		},
		adaption:function(event){
			this.Model.set("bannerDate",this.Model.getDateBannerDate()); 
			this.Model.set("ListWidth",this.Model.getListWidth());
		},
		itemSelect:function(event){
			var id = $(event.target).attr("data-index");
			this.Model.set("position",id);
			return false;
		},
		autoRun:function(){
			var position = this.Model.get("position");
			var itemNum = this.Model.get("itemNum");
			this.timer = setInterval(function(){
				this.nextPage();
			}.bind(this),5000);
		},
		gotoHref:function(){
			var position = this.Model.get("position");
			var hrefs = this.Model.get("hrefs");
			window.location.href = hrefs[position];
		}
	})
	
	return BannerView
})